<template>
  <view class="container">
    <view class="header">
      <view class="header-left">
        <uni-icons type="left" size="25" @click="navBack"></uni-icons>
        <image class="header-userImg" src="/static/image/comment.png" mode="widthFix"></image>
        <text class="header-userName">用户名</text>
      </view>
      <view class="header-right">
        <view class="header-follow">关注</view>
        <image src="/static/image/search_icon@2x.png" mode="widthFix"></image>
      </view>
    </view>
    <!-- 轮播图板块 -->
    <view class="bannar">
      <swiper class="bannar_swiper" circular indicator-dots="true" style="" autoplay="5000">
        <swiper-item class="pageBannarSwiper-item" v-for="(item, index) in 10" :key="index">
          <image src="https://lrj9kwig.cdn.bcebos.com/uploads/images/userfiles/37635/202505/20250520/935aafe61d058a2ee8202c030e60a33e.jpg" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="content">
      <view class="content-tit"> 杭州40°C的高温，不来一个清热 </view>
      <view class="content-writing">正文案在这里正文案在这里正文案在这里正文正文案在这里正文案在这里正文案在这里正文正文案在这里正文案在这里正文案在这里正文正文案在这里正文案在这里正文案在这里正文正文案在这里正文案在这里正文案在这里正文</view>
      <view class="content-subject">
        <text>#夏天</text><text>#夏天</text><text>#夏天</text><text>#夏天</text><text>#夏天</text>
      </view>
      <view class="content-footer">
        <view class="content-time">2025-04-22</view>
        <view class="content-unlike">
          <image src="/static/image/unlike_icon@2x.png" mode="widthFix"></image> 我不喜欢
        </view>
      </view>
    </view>

    <view class="footer">
      <view class="footer-input">
        <image src="/static/image/edit_icon@2x.png" mode="widthFix"></image>
        <input type="text" placeholder="说点什么..." />
      </view>
      <view class="footer-fun">
        <view class="footer-item">
          <image src="/static/image/heart_icon@2x.png" mode="widthFix"></image> <text>100</text>
        </view>
        <view class="footer-item">
          <image src="/static/image/heart_icon@2x.png" mode="widthFix"></image> <text>100</text>
        </view>
        <view class="footer-item">
          <image src="/static/image/heart_icon@2x.png" mode="widthFix"></image> <text>100</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    navBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 22rpx;

  .header-left,
  .header-right {
    display: flex;
    align-items: center;

    image {
      width: 48rpx;
    }
  }

  .header-userImg {
    border-radius: 50%;
    margin: 0 16rpx;
  }

  .header-userName {
    font-size: 32rpx;
    color: #000000;
    font-weight: bold;
  }

  .header-follow {
    width: 100rpx;
    height: 48rpx;
    background: #7414ff;
    border-radius: 24rpx;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
  }
}

.bannar {
  width: 100vw;
  height: 516rpx;

  .bannar_swiper {
    height: 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.content {
  margin: 25rpx;
  padding-bottom: 27rpx;
  border-bottom: 1rpx solid #e6e6e6;

  .content-tit {
    font-weight: 600;
    font-size: 32rpx;
    color: #000000;
    line-height: 45rpx;
    margin-bottom: 16rpx;
  }

  .content-writing {
    font-size: 26rpx;
    color: #000000;
    line-height: 44rpx;
  }

  .content-subject {
    font-size: 26rpx;
    color: #103466;
    line-height: 44rpx;

    text {
      margin-right: 16rpx;
    }
  }

  .content-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10rpx;
  }

  .content-unlike {
    border-radius: 24rpx;
    border: 1rpx solid #888888;
    width: 160rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22rpx;
    color: #888888;
    line-height: 22rpx;

    image {
      width: 32rpx;
      margin-right: 8rpx;
    }
  }
}

.footer {
  padding: 18rpx 24rpx;
  background-color: #fff;
  border-top: 1rpx solid #e6e6e6;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;

  .footer-input {
    width: 294rpx;
    height: 68rpx;
    background: #f5f5f5;
    border-radius: 34rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24rpx;
    box-sizing: border-box;

    image {
      width: 32rpx;
      margin-right: 12rpx;
    }

    input {
      flex: 1;
    }
  }

  .footer-fun {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
  }

  .footer-item {
    display: flex;
    align-items: center;
    padding: 0 8rpx;

    image {
      width: 52rpx;
      margin-right: 8rpx;
    }

    text {
      font-size: 28rpx;
      color: #636363;
    }
  }
}
</style>